<template>
	<view v-show="base && userInfo && randcode && productInfo">
		<view style="width: 100%;height: 100vh;background-size:100% 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;padding-top: 40vw;" :style="{'backgroundImage': 'url('+base.red_bg_image+')'}">
			
			<u-image :src="base.logo_image"
			width="60vw" 
			mode="widthFix"
			style="position: absolute;z-index: 0;top:5vw;"
			></u-image>
			
			<view class="u-font-12" style="position: absolute;z-index: 0;bottom:5vw;" :style="{'color': textColor}">
				{{base.copyright}} 
			</view>
			
			<!-- 信息部分 -->
			<view style="width: 80%; border-radius: 10px; padding: 20px; height: 180px; margin-bottom: 20px; z-index: 10;" :style="{'background-color': bgColor, 'border': '1px solid ' + textColor}">
				<view style="font-size: 20px; font-weight: bold; margin-bottom: 15px; text-align: left;" :style="{'color': textColor}">产品信息</view>
				<view style="display: flex; justify-content: space-between; margin-bottom: 12px;">
					<text style="font-size: 14px;" :style="{'color': textColor}">产品名称：</text>
					<text style="font-size: 14px;" :style="{'color': textColor}">{{productInfo && productInfo.product_name || '暂无信息'}}</text>
				</view>
				<view style="display: flex; justify-content: space-between; margin-bottom: 12px;">
					<text style="font-size: 14px;" :style="{'color': textColor}">酒精度：</text>
					<text style="font-size: 14px;" :style="{'color': textColor}">{{productInfo && productInfo.product_du || '暂无信息'}}</text>
				</view>
				<view style="display: flex; justify-content: space-between;">
					<text style="font-size: 14px;" :style="{'color': textColor}">包装日期：</text>
					<text style="font-size: 14px;" :style="{'color': textColor}">{{productInfo && productInfo.product_date || '暂无信息'}}</text>
				</view>
			</view>
			
			<!-- 红包部分 -->
			<view style="position: relative;">
				<u-image :src="base.redpack_bottom_image" 
				width="50vw" 
				mode="widthFix"
				style="position: relative;z-index: 0;"
				></u-image>
				
				<u-image :src="base.redpack_top_image"
				width="50vw" 
				mode="widthFix"
				style="position: absolute;top: 0px;z-index: 1;"
				></u-image>
				
				<u-image :src="base.kai_open_image"
				width="18vw" 
				class="pulse animated infinite"
				mode="widthFix"
				style="position: absolute;top:15vw;z-index: 2;left: 16vw;"
				@click="$u.throttle(open,1000)"
				></u-image>
			</view>
			
			<!-- 领奖说明放在右上角 -->
			<view style="position: absolute; top: 20px; right: 0; z-index: 10;">
				<view style="display: inline-block; padding: 10rpx 20rpx; border-top-left-radius: 10px; border-bottom-left-radius: 10px; text-align: right;" :style="{'background-color': textColor, 'color': '#ffffff'}" @click="show_rule=true">
					领奖说明
				</view>
			</view>
		</view>
		
		<u-mask :show="show" >
			<view class="warp">
				<view style="position: relative;" @tap.stop>
					<u-image :src="base.redpack_bottom_image" 
					width="60vw" 
					mode="widthFix"
					style="position: relative;z-index: 0;"
					></u-image>
					
					<view style="width: 60vw;position: absolute;top: 0vw;z-index: 1;width: 50vw;left: 5vw;" :animation="animationData">
						<u-image :src="base.red_center_image"
						width="100%" 
						mode="widthFix"
						style="position: absolute;top: 0px;"
						></u-image>
						<view style="position: absolute;top:10vw;padding: 20px;font-size: 30rpx;width:100%">
							<view class="u-text-center" style="width: 100%;font-size: 40rpx;font-weight: bold;color: #b91208;">
								{{result}}
							</view>
						</view>
					</view>
					
					<u-image :src="base.red_top_image"
					width="60vw" 
					mode="widthFix"
					style="position: absolute;top:18vw;z-index: 2;"
					></u-image>
				</view>
			</view>
			<view style="color: #fff;position: absolute;top: 5vw;right: 5vw;" @click="show=false">
				<u-icon name="close" :size="40" color="#fff"></u-icon>
			</view>
		</u-mask>
		
		<u-mask :show="show_rule" >
			<view class="warp" @click="show_rule=false">
				<view style="width: 70vw;border-radius: 20rpx;max-height: 50vh;overflow: scroll;" @tap.stop class="bg_white" >
					<view class="u-p-20" >
						<u-parse :html="base.rule_content"></u-parse>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				randcode:'',
				show:false,
				show_rule:false,
				animation:{},
				animationData: {},
				result:'',
				bgColor: 'rgba(255, 255, 255, 0.4)', // 全局背景色控制
				textColor: '#644524', // 全局文字颜色控制
				productInfo: null, // 产品信息
				isLoading: true // 是否正在加载
			}
		},
		computed: {
			
		},
		onLoad(option) {
			console.log('option: ',option);

			this.randcode = option.randcode;
			// 如果randcode为空，提示错误并返回
			if (!this.randcode) {
				this.showErrorAndGoBack('无法识别扫码内容');
				return;
			}
			
			// 小程序
			// #ifdef MP-WEIXIN
			this.miniloading()
			// #endif

			// H5
			// #ifdef H5
			this.h5loading();
			// #endif

			// 通过randcode获取产品信息
			this.getProductInfo();
		},
		methods: {
			// 显示错误并返回上一页
			showErrorAndGoBack(message) {
				uni.showModal({
					title: '提示',
					content: message,
					showCancel: false,
					confirmText: '关闭',
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				});
			},
			
			// 获取产品信息
			async getProductInfo() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					
					const res = await this.$u.api.get('red/getBatchInfoByRandcode', {randcode: this.randcode});
					console.log('产品信息:', res);
					
					uni.hideLoading();
					
					if (res.code == 1 && res.data) {
						this.productInfo = res.data;
					} else {
						this.showErrorAndGoBack('获取产品信息失败');
					}
				} catch (error) {
					uni.hideLoading();
					console.error('获取产品信息出错:', error);
					this.showErrorAndGoBack('获取产品信息出错');
				}
			},
			
			async open(){
				console.log('1: ',1);
				var t=this;
				if(!this.result){
					const res = await this.$u.api.get('red/index',{randcode:t.randcode})
					
					if(res.code!=1){
						return false;
					}
					this.result=res.msg
				}
				
				this.show=true
				setTimeout(function(){
					var animation = uni.createAnimation({
					    duration: 1500,
						timingFunction: 'ease',
					})	
					t.animation = animation
						 		
					animation.top('-15vw').step()
								
					t.animationData = animation.export()
				},200)
				
			},
			async h5loading() {
				var that = this;
				this.$u.func.base(res => {
					// 处理获取基础信息后的内容
					uni.setNavigationBarTitle({
						title: res.title
					});

					that.$u.func.getuserinfo(res => {
						// 处理获取用户信息后的函数
					});

					that.$u.wx.noshare()
				});
			},
			async miniloading() {
				// var data=await this.$u.api.index();
				// console.log(data)
			},
			async minilogin() {
				var data = await this.$u.api.get('index/banner');
				console.log(data)
			}
		}
	}
</script>

<style>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	/*base code*/
	.animated {
	  -webkit-animation-duration: 0.8s;
	  animation-duration: 0.8s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	}
	.animated.infinite {
	  -webkit-animation-iteration-count: infinite;
	  animation-iteration-count: infinite;
	}
	.animated.hinge {
	  -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	}

	@keyframes pulse {
	  0% {
	    -webkit-transform: scale3d(1, 1, 1);
	    -ms-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1)
	  }
	  50% {
	    -webkit-transform: scale3d(1.1, 1.1, 1.1);
	    -ms-transform: scale3d(1.1, 1.1, 1.1);
	    transform: scale3d(1.1, 1.1, 1.1)
	  }
	  100% {
	    -webkit-transform: scale3d(1, 1, 1);
	    -ms-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1)
	  }
	}
	.pulse {
	  -webkit-animation-name: pulse;
	  animation-name: pulse
	}
</style>